<template>
    <div class="inner-right" v-if="completedCount">
        <button class="clear-completed" @click="ClearAllCompleted">清除完成项</button>
    </div>
</template>

<script>
import * as localforage from "localforage";

export default {
    name: "FooterClearTools",
    props: {
        completedCount: {
            type: Number,
            required: true
        }
    },
    methods: {
        // 清除完成项目
        ClearAllCompleted: function () {
            // 已完成的数据集
            let finished_data = this.$parent.list.filter(item => item.completed);

            // 这里数据展示时，只过滤出未完成的
            this.$parent.list = this.$parent.list.filter(item => !item.completed);

            // 在做后端数据接口时，可用for，然后splice删除
            for (let i = 0; i < finished_data.length; i++) {
                if (finished_data[i].completed) {
                    console.info(finished_data[i]);

                    // 从数据库中删除相应数据
                    localforage.removeItem(finished_data[i].id).then(function() {
                        // 当值被移除后，此处代码运行
                        console.log('Key is cleared!');
                    }).catch(function(err) {
                        // 当出错时，此处代码运行
                        console.log(err);
                    });
                }
            }
        }
    }
}
</script>

<style scoped>

</style>
